{% extends "../page.html" %}

{% block head %}
<link rel="stylesheet" type="text/css" href="/static/admin/css/welcome.css?v=1.0.0">
<script type="text/javascript" src="/static/libs/echarts-5.4.2/dist/echarts.min.js"></script>
<script type="text/javascript" src="/static/libs/html2canvas.min.js"></script>
{% endblock %}

{% block content %}
<div class="main">
    <div class="top-action-panel layui-elem-quote">
        <div class="left">
            <span class="x-red"><b>{{ data.system_name}}</b></span>
            <b>v{{ data.version }}</b>
            欢迎您！当前时间：<span class="curr-time"></span>
        </div>
        <div class="right">
            <div class="types">
                <div class="type active" data-type="pv">浏览量 PV</div>
                <div class="type" data-type="uv">访客数 UV</div>
            </div>
            <div class="layui-btn-group">
                <button type="button" id="btn_cache_refresh" class="layui-btn layui-btn-primary layui-btn-xs"
                        title="刷新缓存"
                        data-url="{{ data.cache_refresh_api }}">
                    <i class="layui-icon layui-icon-refresh-1"></i>
                </button>
                <button type="button" id="btn_img_download" class="layui-btn layui-btn-primary layui-btn-xs"
                        title="图片下载">
                    <i class="layui-icon layui-icon-picture-fine"></i>
                </button>
            </div>
        </div>
    </div>
    <div class="layui-container dashboard">
        <div class="layui-row">
            <div class="layui-col-md8 layui-col-sm12 layui-col-xs12 left">
                <div class="number-panel" data-url="{{ data.number_data_api }}">
                    <!-- 访问次数、访问人数、登录次数 -->
                    <div class="item pv">
                        <div class="content">
                            <div class="title">浏览量 PV</div>
                            <div class="value">
                                <div class="number">
                                    <span class="val">--</span>
                                    <span class="unit">次</span>
                                </div>
                                <div class="trend rise">
                                    <i class="yunj-icon yunj-icon-rise"></i>
                                    --%
                                </div>
                            </div>
                        </div>
                        <div class="icon">
                            <i class="yunj-icon yunj-icon-click"></i>
                        </div>
                    </div>
                    <div class="item uv">
                        <div class="content">
                            <div class="title">访客数 UV</div>
                            <div class="value">
                                <div class="number">
                                    <span class="val">--</span>
                                    <span class="unit">人</span>
                                </div>
                                <div class="trend rise">
                                    <i class="yunj-icon yunj-icon-rise"></i>
                                    --%
                                </div>
                            </div>
                        </div>
                        <div class="icon">
                            <i class="layui-icon layui-icon-user"></i>
                        </div>
                    </div>
                    <div class="item login-uv">
                        <div class="content">
                            <div class="title">登录人数</div>
                            <div class="value">
                                <div class="number">
                                    <span class="val">--</span>
                                    <span class="unit">人</span>
                                </div>
                                <div class="trend rise">
                                    <i class="yunj-icon yunj-icon-rise"></i>
                                    --%
                                </div>
                            </div>
                        </div>
                        <div class="icon">
                            <i class="yunj-icon yunj-icon-login"></i>
                        </div>
                    </div>
                </div>
                <!--今日pv、uv数据，与昨日pv、uv数据-->
                <div class="line-chart-panel" data-url="{{ data.line_chart_data_api }}">
                    <div class="action-box">
                        <div class="left">
                            <div class="title">访问趋势</div>
                        </div>
                        <div class="right">
                        </div>
                    </div>
                    <div class="action-box">
                        <div class="left"></div>
                        <div class="right">
                            <div class="compares">
                                <div class="compare">
                                    <input type="checkbox" checked="checked" id="yesterday_data_show">
                                    <label for="yesterday_data_show">前一日</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="line-chart"></div>
                </div>
            </div>
            <div class="layui-col-md4 layui-col-sm12 layui-col-xs12 right">
                <div class="map-chart-panel" data-url="{{ data.map_chart_data_api }}">
                    <div class="title">地域分布</div>
                    <div class="map-chart"></div>
                    <div class="map-legend">
                        浏览量: 高<em></em>低
                    </div>
                </div>
                <div class="bar-chart-panel" data-url="{{ data.bar_chart_data_api }}">
                    <div class="title">地域排名</div>
                    <div class="bar-chart"></div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block script %}
<script type="text/javascript" src="/static/admin/js/welcome.js?v=1.0.1"></script>
<script type="text/javascript">
    layui.use(["jquery", 'yunj'], function () {
        let win = window;
        let doc = document;
        let $ = layui.jquery;

        // console.log(yunj.config('admin.entrance'));

        $(doc).ready(function () { 
            setInterval(function(){
                $(".curr-time").html(yunj.currDatetime());
            },1000);
        });

    });
</script>
{% endblock %}